<template>
	<view class="service-container">
		<uni-segmented-control class="box-shadow" :current="current" :values="items" @clickItem="onClickItem"
			styleType="text" activeColor="#53B3D9"></uni-segmented-control>
		<view class="content">
			<block v-for="(item,index) in 4">
				<view class="d-flex item-box align-items-center">
					<image class="item-box-face" src="../../static/images/certificate/avatar.png" mode=""></image>
					<view>
						<view class="item-box-name">张三</view>
						<view class="item-box-desc">工号：001</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['遗嘱库专员', '合作单位', '合作个人'],
				current: 0
			};
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style lang="scss">
	.service-container {
		line-height: 1;

		.box-shadow {
			box-shadow: 0rpx 3rpx 20rpx 0px rgba(194, 194, 194, 0.28);
		}

		.item-box {
			padding: 0 22rpx;
			height: 125rpx;
			border-bottom: 1rpx dotted rgba(231, 231, 231, 1);

			.item-box-face {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}

			.item-box-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.item-box-desc {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				margin-top: 12rpx;
			}
		}

	}
</style>
